<template>
	<view class="container">
		<image class="activity-img" :src="vdata.activityDetail.activityImg"></image>
		<view class="name">
			<view v-if="vdata.activityDetail.state === 4">进行中</view>
			<view v-else style="background-color: darkorange;">已结束</view>
			<view>{{ vdata.activityDetail.activityName }}</view>
		</view>
		<view class="row">
			<image class="icon" src="@/static/new/businessCircle/icon-coupon.png"></image>
			<text>{{ vdata.activityDetail.activityTypeName }}</text>
		</view>
		<view class="row">
			<image class="icon" src="@/static/new/businessCircle/icon-date.png"></image>
			{{ dayjs(vdata.activityDetail.startTime).format('YYYY[年]M[月]D[日]') }}~{{
			dayjs(vdata.activityDetail.endTime).format('YYYY[年]M[月]D[日]') }}
		</view>
		<view class="line"></view>
		<view class="row tip">
			<image class="icon" src="@/static/new/businessCircle/icon-tip.png"></image>
			<text>{{ vdata.activityDetail.remark?.replace(/\\n/g, "\n") }}</text>
		</view>
	</view>
</template>

<script setup>
	import dayjs from 'dayjs'
	import { $fansActivityDetail } from '@/http/apiManager.js'
	import { onLoad } from '@dcloudio/uni-app';
	import { reactive } from 'vue'
	import { formatRichText } from '@/util/htmlUtil.js'
	const vdata = reactive({
		activityDetail: {},	// 活动详情
	})
	onLoad(async ({ activityId }) => {
		await $fansActivityDetail({ activityId }).then(({ bizData }) => {
			Object.assign(vdata.activityDetail, { ...bizData.detail, remark: formatRichText(bizData.detail.remark) })
		})
	})
</script>

<style lang="less">
	.container {
		width: 100%;
		min-height: 100vh;
		padding: 32rpx;
		box-sizing: border-box;
		overflow: hidden;
	
		.activity-img {
			width: 100%;
			height: 372rpx;
			border-radius: 16rpx;
		}
	
		.name {
			margin-top: 36rpx;
			display: flex;
			align-items: center;
			gap: 12rpx;
	
			view {
				&:nth-child(1) {
					display: inline-block;
					background-color: #24C789;
					transform: skewX(-20deg);
					padding: 6rpx 10rpx;
					font-size: 28rpx;
					color: #FFFFFF;
					border-radius: 12rpx;
					font-weight: bold;
				}
	
				&:nth-child(2) {
					font-weight: bold;
					font-size: 38rpx;
					color: #333333;
				}
			}
		}
	
		.row {
			position: relative;
			padding-left: 38rpx;
			font-size: 26rpx;
			color: #A0A9C0;
			margin-top: 24rpx;
	
			.icon {
				width: 26rpx;
				height: 26rpx;
				position: absolute;
				left: 0rpx;
				top: 5rpx;
			}
	
			view {
				&:nth-child(n + 2) {
					margin-top: 24rpx;
				}
			}
		}
	
		.line {
			height: 2rpx;
			background-color: #F3F3F3;
			margin: 30rpx 0;
		}
	}
</style>